<template>
	<view>
		<u-sticky>
			<view class="search-box">
				<u-search placeholder="输入关键字搜索" @change="getNavList" :showAction="false" v-model="keyWord"
					shape="round"></u-search>
				<view class="btn-box" @click="toAiDialog">
					<image class="img" :src="localIconSrc('logo.png')"></image>
					<view class="text">
						<view class="bar">AI</view>
						<view class="bar">对</view>
						<view class="bar">话</view>
					</view>
				</view>
			</view>
			<view class="nav-box">
				<u-tabs lineColor="#FF6005" :current="activeIndex" :inactiveStyle="tabStyle" activeStyle="color:#FF6005"
					:list="navList" @click="navFun"></u-tabs>
			</view>
		</u-sticky>

		<view class="loop-box">
			<u-grid :border="false" col="2" @click="typeSelect">
				<u-grid-item v-for="(listItem,listIndex) in listData" :key="listIndex">
					<view class="item">
						<view class="left" :style="'background-color:'+listItem.color">{{listItem.title.substring(0,1)}}
						</view>
						<view class="right">
							<view class="name">{{listItem.title}}</view>
							<view class="remark">{{listItem.describe}}</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="nodata" v-if="listData.length<=0" style="margin-top: 200rpx;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		createList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				datas: [],
				listData: [],
				keyWord: '',
				navList: [],
				list: [],
				hotList: [],
				activeIndex: 0,
				tabStyle: {
					color: '#666666'
				},
			};
		},
		onLoad() {
			this.getNavList()
		},
		onShareTimeline() {
			return {
				title: 'AI创作',
				// query: 'code=' + this.code
			}
		},
		onShareAppMessage() {
			return {
				title: 'AI创作',
				path: '/pages/ai-create/list/list'
			}
		},
		methods: {
			toAiDialog() {
				uni.navigateTo({
					url: '/pages/ai-create/ai-dialog/ai-dialog'
				})
				return
				// if (uni.getStorageSync('apiticket')) {
				// 	uni.navigateTo({
				// 		url: '/pages/ai-create/ai-dialog/ai-dialog'
				// 	})
				// } else {
				// 	uni.showModal({
				// 		title: "提示",
				// 		content: "请先登录",
				// 		success(res) {
				// 			if (res.confirm) {
				// 				setTimeout(() => {
				// 					uni.navigateTo({
				// 						url: "/pages/login/index",
				// 					})
				// 				}, 1000);
				// 			}
				// 		},
				// 	});
				// }

			},
			typeSelect(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/ai-create/detail/detail?item=' + JSON.stringify(this.listData[e])
				})
			},
			navFun(e) {
				this.activeIndex = e.index
				if (e.index == 0) {
					this.listData = this.hotList
				} else {
					this.listData = this.datas[e.index - 1].item.map(items => {
						return {
							color: `rgb(${Math.floor(Math.random() * 256)},${ Math.floor(Math.random() * 256)},${ Math.floor(Math.random() * 256)})`,
							...items
						}
					})
				}

			},
			getNavList() {
				uni.showLoading({
					title: '请稍后...'
				})
				createList({
					type: '',
					key: this.keyWord
				}).then(res => {
					console.log(res)
					if (res.data.list.length > 0) {
						this.datas = res.data.list
						let arr = [{
							name: '热门推荐'
						}]
						res.data.list.forEach(item => {
							arr.push({
								name: item.catinfo.catname
							})
						})
						const gg = res.data.list_recommend.map(item => {
							return {
								color: `rgb(${Math.floor(Math.random() * 256)},${ Math.floor(Math.random() * 256)},${ Math.floor(Math.random() * 256)})`,
								...item
							}
						})
						this.listData = gg
						this.hotList = gg
						this.navList = arr
						uni.hideLoading()
						this.navFun({index:0})
					} else {
						this.listData = []
						this.hotList = []
						this.navList = []
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loop-box {
		width: 100%;
		padding: 0 10rpx;
		padding-bottom: 60rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			width: 94%;
			background-color: #fff;
			border-radius: 10rpx;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.left {
				width: 60rpx;
				height: 60rpx;
				flex-shrink: 0;
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
			}

			.right {
				width: calc(100% - 80rpx);

				.name {
					font-size: 28rpx;
					font-weight: 600;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.remark {
					font-size: 24rpx;
					color: #717171;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.nav-box {
		width: 100%;
		background-color: #fff;
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(6rpx);
		}

		50% {
			transform: translateY(-6rpx);
		}
	}

	.search-box {
		display: flex;
		padding: 20rpx 20rpx;
		align-items: center;
		background-color: #fff;

		.btn-box {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background-color: #f5e9e7;
			border-radius: 50rpx;
			margin-left: 20rpx;
			height: 100%;

			.text {
				font-size: 32rpx;
				font-weight: 600;
				display: flex;

				.bar {
					animation: bounce 1s infinite;
					background: linear-gradient(to top, #6F31F4, #FF6005);
					color: transparent;
					-webkit-background-clip: text;
				}

				.bar:nth-child(1) {
					animation-delay: 0s;
				}

				.bar:nth-child(2) {
					animation-delay: 0.1s;
				}

				.bar:nth-child(3) {
					animation-delay: 0.2s;
				}
			}

			.img {
				width: 42rpx;
				height: 42rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>